<template>
	<div style="border: 1px solid #ccc;width: 100%;">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
			:mode="mode" />
		<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
			:mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
	</div>
</template>
<script>
	import '@wangeditor/editor/dist/css/style.css' // 引入 css

	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted,
		onUpdated
	} from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import store from '../store'
	export default {
		components: {
			Editor,
			Toolbar
		},
		props:{
			contentHtml:String,
		},
		setup(props, content) {
			// 编辑器实例，必须用 shallowRef
			const editorRef = shallowRef()
			let status = 1
			console.log(11111,props.contentHtml)
			// 内容 HTML
			const valueHtml = ref(props.contentHtml?props.contentHtml:'')

			// 模拟 ajax 异步获取内容
			onMounted(() => {

			})

			const toolbarConfig = {
				excludeKeys: ['emotion', 'group-video']
			}
			const editorConfig = {
				placeholder: '请输入内容...',
				MENU_CONF: {
					uploadImage: {
						server: '/api/updateImage/articles',
						// form-data fieldName ，默认值 'wangeditor-uploaded-image'
						fieldName: 'files',

						// 单个文件的最大体积限制，默认为 2M
						maxFileSize: 10 * 1024 * 1024, // 1M

						// 最多可上传几个文件，默认为 100
						maxNumberOfFiles: 10,

						// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
						allowedFileTypes: ['image/*'],

						// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
						meta: {

						},

						// 将 meta 拼接到 url 参数中，默认 false
						metaWithUrl: false,

						// 自定义增加 http  header
						headers: {
							'Authorization': store.state.userInfoX && store.state.userInfoX.token
						},

						// 跨域是否传递 cookie ，默认为 false
						withCredentials: true,

						// 超时时间，默认为 10 秒
						timeout: 5 * 1000, // 5 秒
						// 上传之前触发
						onBeforeUpload(file) {

							return file


						},

						// 上传进度的回调函数
						onProgress(progress) { // TS 语法
							// onProgress(progress) {       // JS 语法
							// progress 是 0-100 的数字
							console.log('progress', progress)
						},

						// 单个文件上传成功之后
						onSuccess(file, res) { // TS 语法
							// onSuccess(file, res) {          // JS 语法
							console.log(`${file.name} 上传成功`, res)
						},
						customInsert(res, insertFn) { // TS 语法
							console.log(res)
							insertFn(res.data.file_path, res.data.file_name, res.data.file_path)
						},
						// 单个文件上传失败
						onFailed(file, res) { // TS 语法
							// onFailed(file, res) {           // JS 语法
							console.log(`${file.name} 上传失败`, res)
						},

						// 上传错误，或者触发 timeout 超时
						onError(file, err, res) { // TS 语法
							// onError(file, err, res) {               // JS 语法
							console.log(`${file.name} 上传出错`, err, res)
						},
					}
				},
			}
			// 组件销毁时，也及时销毁编辑器
			onBeforeUnmount(() => {
				const editor = editorRef.value
				if (editor == null) return
				editor.destroy()
			})
			onUpdated (() => {
				console.log(props.contentHtml&&status==1)
				if(props.contentHtml&&props.contentHtml!='<p><br></p>'&&status==1){
					valueHtml.value = props.contentHtml
					console.log(props.contentHtml)
					status = 0
				}
			})
			const handleChange = (editor) => {
				console.log(valueHtml.value)
				content.emit('onchange', valueHtml.value);
			}
			const handleCreated = (editor) => {
				editorRef.value = editor // 记录 editor 实例，重要！

				console.log(editor.getAllMenuKeys())

			}

			return {
				editorRef,
				valueHtml,
				mode: 'default', // 或 'simple'
				toolbarConfig,
				editorConfig,
				handleCreated,
				handleChange
			};
		}
	}
</script>
